<template>
  <div>
    <el-form :inline="true" class="demo-form-inline" size="small">
      <el-form-item label="">
        <el-input v-model="queryField" placeholder="请输入关键字"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryFieldData">搜索</el-button
        ><el-button
          class="query-btn"
          type="primary"
          @click="editField({})"
          size="small"
          v-if="!id"
          v-has-permi="['Create']"
          plain
          >新增</el-button
        ><template v-else>
          <el-button
            size="small"
            @click="(queryField = '字符串'), queryFieldData()"
            >字符串</el-button
          >
          <el-button
            size="small"
            @click="(queryField = '单选'), queryFieldData()"
            >单选</el-button
          >
          <el-button
            size="small"
            @click="(queryField = '多选'), queryFieldData()"
            >多选</el-button
          >
          <el-button
            size="small"
            @click="(queryField = '附件'), queryFieldData()"
            >附件</el-button
          >
          <el-button
            size="small"
            @click="(queryField = '日期'), queryFieldData()"
            >日期</el-button
          >
          <el-button
            size="small"
            @click="(queryField = '时间'), queryFieldData()"
            >时间</el-button
          >
        </template>
      </el-form-item>
    </el-form>
    <el-table
      :data="fieldList"
      stripe
      @selection-change="handleSelectionChange"
      size="small"
      class="full-width"
    >
      <el-table-column v-if="id" type="selection" width="55"> </el-table-column>
      <el-table-column align="left" type="index" label="序号" min-width="60">
        <template slot-scope="scope">
          {{(fieldPage.page-1)*fieldPage.per_page+scope.$index+1}}
        </template>
      </el-table-column>
      <el-table-column align="left" prop="username" label="字段名称">
        <template slot-scope="{ row }">
          <span>{{ row.field_name }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" prop="field_key" label="字段标识">
        <template slot-scope="{ row }">
          <span>{{ row.field_key }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" prop="field_type_id" label="字段类型">
        <template slot-scope="{ row }">
          <span v-if="row.field_type_id === 5">字符串</span>
          <span v-if="row.field_type_id === 10">整型</span>
          <span v-if="row.field_type_id === 15">浮点型</span>
          <span v-if="row.field_type_id === 20">布尔</span>
          <span v-if="row.field_type_id === 25">日期</span>
          <span v-if="row.field_type_id === 30">日期时间</span>
          <span v-if="row.field_type_id === 35">单选框</span>
          <span v-if="row.field_type_id === 40">多选框</span>
          <span v-if="row.field_type_id === 45">下拉列表</span>
          <span v-if="row.field_type_id === 50">多选下拉列表</span>
          <span v-if="row.field_type_id === 55">文本域</span>
          <span v-if="row.field_type_id === 58">富文本</span>
          <span v-if="row.field_type_id === 60">用户</span>
          <span v-if="row.field_type_id === 70">多选用户</span>
          <span v-if="row.field_type_id === 80">附件</span>
        </template>
      </el-table-column>
<!--      <el-table-column align="left" prop="order_id" label="排序" width="100">-->
<!--        <template slot-scope="{ row }">-->
<!--          <span>{{ row.order_id }}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column align="left" prop="label" label="字段描述">
        <template slot-scope="{ row }">
          <span>{{ row.description }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="创建人">
        <template slot-scope="{ row }">
          <span>{{ row.creator }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="创建时间" width="170">
        <template slot-scope="{ row }">
          <span>{{ row.gmt_created }}</span>
        </template>
      </el-table-column>

      <el-table-column
        align="left"
        fixed="right"
        label="操作"
        width="100"
        v-if="!id"
      >
        <template slot-scope="{ row }">
          <edit-button @click="editField(row)"></edit-button>
          <delete-button @click="deleteField(row.id)"></delete-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="fieldPage.total > 0"
      :total="fieldPage.total"
      :page.sync="fieldPage.page"
      :limit.sync="fieldPage.per_page"
      @pagination="getFieldData"
    />

    <fieldAdd
      :visible.sync="fieldEditVisible"
      @reloadList="getFieldData"
      :row="editFieldRow"
      v-if="fieldEditVisible"
    ></fieldAdd>
  </div>
</template>
<script>
import api from "@/api/index";
import qs from "qs";
import fieldAdd from "../components/fieldAdd";
export default {
  components: {
    fieldAdd
  },
  computed: {
    height() {
      return this.id ? 575 : "";
    }
  },
  data() {
    return {
      queryField: "",
      fieldList: [],
      fieldId: null,
      fieldEditVisible: false,
      fieldPage: {
        count: 0,
        page: 1,
        page_num: 10,
        total: 0,
        per_page: 10
      },
      editFieldRow: {},
      id: this.$route.query.id,
      multipleSelection: []
    };
  },
  created() {
    this.getFieldData();
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    editField(row) {
      this.editFieldRow = row;
      this.fieldEditVisible = true;
    },
    //搜索字段
    queryFieldData() {
      this.fieldPage.per_page = 10;
      this.fieldPage.page = 1;
      this.getFieldData();
    },
    //获取字段列表
    getFieldData() {
      api
        .getAllField(
          qs.stringify({
            per_page: this.fieldPage.per_page,
            page: this.fieldPage.page,
            search_value: this.queryField
          })
        )
        .then(res => {
            this.fieldList = res.data.value;
            this.fieldPage.per_page = res.data.per_page;
            this.fieldPage.total = res.data.total;
            this.fieldPage.page = res.data.page;
        });
    },
    //删除自定义字段
    deleteField(dedId) {
      this.$confirm("删除该消息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        api.delAllField(dedId).then(res => {
            this.msgSuccess("删除成功!");
            this.getFieldData();
        });
      });
    }
  }
};
</script>
<style scoped>
.text {
  width: 100px;
}
.query {
  display: flex;
  align-items: center;
}
</style>
